<template>
  <div class="home">
    
    <van-search v-model="value" show-action placeholder="请输入搜索关键词" @search="onSearch" @cancel="onCancel" />
    <van-picker title="数据库选择" show-toolbar :columns="columns" @confirm="onConfirm" @cancel="onCancel" @change="onChange" />
    <h1>This is a home page{{ bird }}</h1>
    <p>某种动物的介绍{{ apiKey }}</p>

  </div>
</template>

<script>
import { Toast } from 'vant';
import { mapState } from 'vuex';
export default {
  //导入vuex里的数据
  computed: {
    ...mapState(['apiKey','mammalia','bird','reptilia']),
  },
  data() {
    return {
      value: '',
      //用vuex里的数据来作为选择器的内容
      columns: [this.$store.state.mammalia, this.$store.state.bird, this.$store.state.reptilia,],
    };
  },
  methods: {
    onSearch(val) {
      Toast(val);
    },
    onCancel() {
      Toast('取消');
    },
    onConfirm(value, index) {
      Toast(`当前值：${value}, 当前索引：${index}`);
    },
    onChange(picker, value, index) {
      Toast(`当前值：${value}, 当前索引：${index}`);
    },
  },


};

</script>